<template>
  <div class="login_body">
    <div class="login">
      <div class="container a-container" id="a-container">
        <el-form :model="user" class="form" id="b-from">

          <el-form-item>
            <h2 class="form_title title">信息填写</h2>
          </el-form-item>

          <el-form-item>
            <el-input v-model="user.account" class="form_input" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="user.username" class="form_input" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="user.password" class="form_input" style="width: 180px;" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="user.email" class="form_input" placeholder="请输入电子邮箱"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="medium" @click="register()" round >注册用户</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="switch" id="switch-cnt">
        <div class="switch_circle"></div>
        <div class="switch_circle switch_circle-t"></div>

        <div class="switch_container" id="switch-c1">
          <h2 class="switch_title title" style="letter-spacing: 0;">欢 迎 注 册</h2>
          <p class="switch_description description">已有账号?登录一下</p>
          <el-button type="primary" size="medium" @click="gologin()" round>去登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
@import "@/assets/loginandregister.css";
</style>

<script>

import request from "@/utils/request";

export default {
  name: "Register",
  data() {
    return {
      user: {}
    }
  },
  // 页面加载的时候，做一些事情，在created里面
  created() {

  },
  // 定义一些页面上控件出发的事件调用的方法
  methods: {
    register() {
      request.post("/user/register",this.user).then(res =>{
        if (res.code === '0'){
          this.$message.success("注册成功!")
          this.$router.push("/loginview")    //登录成功则跳转到首页
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    gologin(){
      this.$router.push("/loginview")
    }
  }
}
</script>

